<!--
 * @Author: your name
 * @Date: 2021-07-20 14:21:01
 * @LastEditTime: 2021-09-14 16:23:04
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \usp-osm-frondend\src\views\orderCenter\deliveryOrder\details.vue
-->
<template>
  <div
    class="white-content"
    v-loading="pageLoading"
    element-loading-text="loading"
  >
    <div class="newPageTitle">
      <span class="backIcon" @click="goBack"><i class="el-icon-back"></i></span>
      <h1 style="display: inline-block; margin-left: 10px; font-weight: bold">
        发货单详情
      </h1>
    </div>
    <div class="detail-content-section">
      <h2>
        <span>发货通知单号：{{ datas.dispatchNo }}</span>
        <span style="float: right">
          发货单状态：{{
            getDictionaryNameByCode('ORDERDISPATCHSTATUS', datas.status)
          }}
        </span>
      </h2>
      <el-form label-width="160px" label-position="left">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="主订单号：">
              <span @click="masterDetails(datas.orderId)" class="colorLink">{{
                datas.orderNo
              }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="子订单号：">
              <span @click="subDetails(datas.subOrderId)" class="colorLink">{{
                datas.subOrderNo
              }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户ID：">
              {{ datas.customerId }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="用户姓名：">
              {{ datas.customerName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户手机号：">
              {{ datas.customerMobile }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户邮箱：">
              {{ datas.customerEmail }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="发货通知单创建时间：">
              {{ datas.createTime | timestampToChange('time') }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发货通知单更新时间：">
              {{ datas.updateTime | timestampToChange('time') }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="detail-content-section">
      <h2>收货信息</h2>
      <el-form label-width="100px" label-position="right">
        <el-row :gutter="40">
          <el-col :span="8">
            <el-form-item label="联系人姓名：">
              {{ datas.responseOrderCustomerAddressVo.contactName }}
            </el-form-item>
          </el-col>
          <!--  -->
          <el-col :span="8">
            <el-form-item label="联系人电话：">
              {{ datas.responseOrderCustomerAddressVo.contactMobile }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人邮箱：">
              {{ datas.responseOrderCustomerAddressVo.contactEmail }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="8">
            <el-form-item label="省份：">
              {{ datas.responseOrderCustomerAddressVo.province }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="城市：">
              {{ datas.responseOrderCustomerAddressVo.city }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="地区：">
              {{ datas.responseOrderCustomerAddressVo.region }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="详细地址：">
              {{ datas.responseOrderCustomerAddressVo.address }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="datas.responseOrderDispatchItemsVoList">
        <el-table-column
          label="商品名称"
          align="center"
          min-width="160"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            {{ scope.row.spuName }}
          </template>
        </el-table-column>
        <el-table-column
          label="SKU Code"
          align="center"
          min-width="140"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            {{ scope.row.skuCode }}
          </template>
        </el-table-column>
        <el-table-column
          label="数量"
          align="center"
          min-width="60"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            {{ scope.row.quantity }}
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          align="center"
          min-width="100"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            {{
              getDictionaryNameByCode(
                'ORDERDISPATCHITEMSSTATUS',
                scope.row.status
              )
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="logisticsNo"
          label="物流单号"
          align="center"
          min-width="120"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            {{ scope.row.logisticsNo }}
          </template>
        </el-table-column>
        <el-table-column
          label="物流供应商"
          align="center"
          min-width="120"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            {{ scope.row.supplierName }}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          align="center"
          min-width="120"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.status === '2' || scope.row.status === '3'"
              class="colorLink"
              @click="getLogistics(scope.row)"
            >
              查看物流
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <logistics-dialog ref="logisticsDialog"></logistics-dialog>
  </div>
</template>

<script>
import { setRouterParams, getRouterParams } from '@/utils/auth'
import LogisticsDialog from './dialog/logistics.vue'
import { getDeveryOrderDetail } from '@/api/order'
import { common } from '@/mixins/common'
import { mapGetters } from 'vuex'
export default {
  name: 'deliveryOrderDetails',
  components: { LogisticsDialog },
  data () {
    return {
      datas: {
        responseOrderCustomerAddressVo: {},
        responseOrderDispatchItemsVoList: []
      },
      tableData: [],
      pageLoading: false,
      id: ''
    }
  },
  mixins: [common],
  computed: {
    ...mapGetters(['lookupItems'])
  },
  mounted () {
    let params = {}
    if (this.$route.params.id) {
      setRouterParams(this.$route)
      params = this.$route.params
    } else {
      params = getRouterParams(this.$route)
    }
    const id = params.id
    this.getDeveryDetailById(id)
  },
  methods: {
    getLogistics (row) {
      if (
        !this.$auth('orderManagement:consignmentNote:checkLogisticsInformation')
      ) {
        this.$alert('您没有权限')
        return false
      }
      this.$refs.logisticsDialog.open(row.id)
    },
    goBack () {
      this.$router.go(-1)
    },
    getDeveryDetailById (id) {
      this.pageLoading = true
      getDeveryOrderDetail(id)
        .then((res) => {
          if (res) {
            if (Number(res.code) === 1) {
              this.datas = res.obj
              if (res.obj.responseOrderCustomerAddressVo) {
                this.datas.responseOrderCustomerAddressVo =
                  res.obj.responseOrderCustomerAddressVo
              } else {
                this.datas.responseOrderCustomerAddressVo = {
                  contactName: '无',
                  contactMobile: '无',
                  contactEmail: '无',
                  province: '无',
                  city: '无',
                  region: '无',
                  address: '无'
                }
              }
            } else {
              this.$alert('获取发货单详情失败', {
                callback: (action) => {
                  this.goBack()
                }
              })
            }
            this.pageLoading = false
          }
        })
        .catch(() => {
          this.pageLoading = false
          this.$alert('获取发货单详情失败')
        })
    },
    masterDetails (id) {
      if (!this.$auth('orderManagement:mainOrder:detail')) {
        this.$alert('您没有权限')
        return false
      }
      this.$router.push({ name: 'masterOrderDetails', params: { id: id } })
    },
    subDetails (id) {
      if (!this.$auth('orderManagement:subOrder:detail')) {
        this.$alert('您没有权限')
        return false
      }
      this.$router.push({ name: 'suborderDetails', params: { id: id } })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.footer {
  width: 100%;
  margin: 0;
}
.detail-section {
  h2 {
    margin: 15px 0;
    font-weight: bold;
  }
}
/deep/ .el-form-item {
  margin-bottom: 0;
}
</style>
